<template>
    <div id="todayRechargeComponents" class="todayRechargeComponents">
        <div ref="echartsRef" style="width: 100%; height: 100%;"></div>
        <div class="radius" :style="item.radiusPosition" v-for="(item, index) in dataList" :key="index"></div>
    </div>
</template>
<script setup name="todayRechargeComponents">
import { ref, onMounted, shallowRef, watch, nextTick } from "vue";
import * as echarts from "echarts";
import useAppStore from "@/store/modules/app";
const appStore = useAppStore();
const sidebarStatus = computed(() => appStore.sidebar.opened);
const chart = shallowRef(null);
const echartsRef = ref(null);
const dataList = ref([
    {
        value: 0, 
        name: '现金',
        itemStyle:{
            color: '#6a97ff'
        },
        radiusPosition: ''
    },
    {
        value: 0, 
        name: '微信',
        itemStyle:{
            color: '#f5a235'
        },
        radiusPosition: ''
    }
])
const option = ref({
    tooltip: {
        trigger: 'item',
        borderWidth: 0,
        formatter: (e)=>{
        return `<span style="width: 6px;height: 6px;border-radius: 100%;background-color:${dataList.value[e.dataIndex].itemStyle.color};display: inline-block;"></span>
            <span style="color: #4E5969;font-size: 12px;">${e.name}收款</span>
            <span style="color: #1D2129;font-size: 12px;margin-left: 9px;">${e.value}笔</span>`
        }
    },
    series:[
        {
            type: 'pie',
            radius: '80%',
            data: dataList.value,
            label:{
                formatter: (e)=>{
                    return `{title|${e.name}}{value|${e.value}}{title|笔}`
                },
                minMargin: 5,
                rich:{
                    title:{
                        color: '#4E5969',
                        fontSize: 11
                    },
                    value:{
                        color: '#1D2129',
                        fontSize: 11,
                        padding: [0, 0, 0, 3]
                    }
                }
            },
            labelLine:{
                length: 0,
                length2: 34,
                maxSurfaceAngle: 80,
                smooth: false
            },
            labelLayout: function (params) {
                const isLeft = params.labelRect.x < chart.value.getWidth() / 2;
                const points = params.labelLinePoints;
                points[1][0] = isLeft ? points[0][0] - 8 : points[0][0] + 8;
                points[1][1] = isLeft ? points[1][1] - 15 : points[1][1] + 15;
                points[2][0] = isLeft ? points[2][0] - 8 : points[2][0] + 8;
                points[2][1] = points[1][1];
                dataList.value[params.dataIndex].radiusPosition = 
                    `top: ${points[2][1] - 2}px;left: ${points[2][0] - 2}px;background: ${dataList.value[params.dataIndex].itemStyle.color};`
                return {
                    dx: isLeft ? -8 : 8,
                    dy: isLeft ? -15 : 15,
                    labelLinePoints: points
                };
            },
            emphasis: {
                itemStyle: {
                    height: '25px',
                    boxShadow: '0px 2px 5px 0px rgba(0,0,0,0.1), 0px 36px 15px 0px rgba(0,0,0,0.01), 0px 56px 16px 0px rgba(0,0,0,0)',
                    boderRadius: '2px',
                    boder: 'none',
                    background: 'rgba(255,255,255,0.95)',
                }
            }
        }
    ]
})
const timer = ref(null);
const mountedStatus = ref(false);
// 监听计算属性
watch(sidebarStatus, () => {
    resizeCharts();
})
onMounted(()=>{
    mountedStatus.value = true;
    window.addEventListener('resize', resizeCharts)
    nextTick(()=>{
        getChartsData();
    })
})
function getChartsData(){
    // dataList.value[0].value = 33;
    // dataList.value[1].value = 25;
    chart.value = echarts.init(echartsRef.value);
    chart.value.setOption(option.value);
}
function resizeCharts(width){
    chart.value.showLoading('default',{
        text: '',
        lineWidth: 2
    })
    setTimeout(()=>{
        let dom = document.getElementById('todayRechargeComponents');
        if(dom){
            chart.value.resize(width);
        }
        chart.value.clear();
        chart.value.setOption(option.value);
        chart.value.hideLoading();
    }, 500)
}
</script>
<style scoped lang="scss">
@import "@/assets/styles/public.scss";
.todayRechargeComponents{
    width: 100%;
    height: 100%;
    position: relative;
    .radius{
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 4px;
        border-radius: 100%;
        z-index: 5;
    }
}
</style>